<template>
  <div class="home">
    <div class="nav">
      <el-button type="primary" @click="isOpenAddPop()">新增</el-button>
      <div class="nav-list">
        <div 
          class="nav-list-items"
          v-for="item in navList"
          :key="'navitem' + item.id">
          <span 
            :class="{'active-item': item.id===activeItemID}"
            @click="chooseNavItem(item)">{{item.name}}</span>
          <!-- <i class="el-icon-edit" @click="isOpenEditPop(item)"></i> -->
          <i class="el-icon-delete" @click="deleteItem(item)"></i>
        </div>
      </div>
    </div>
    <div class="show-box">
      <DetailTable :dbLinkID="activeItemID"></DetailTable>
    </div>
    <el-dialog
      :title="popTitle"
      :visible.sync="isShowPop"
      width="60%"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      @close="closePop()">
      <el-form :model="tableParam" :rules="rules" ref="tableForm" label-width="100px" class="table-form">
        <el-form-item label="名称" prop="name">
          <el-input v-model="tableParam.name"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="tableParam.type" clearable style="width:100%">
            <el-option
              v-for="item in typeOptions"
              :key="'type' + item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="链接字符串" prop="connection_string">
          <el-input v-model="tableParam.connection_string"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowPop = false">取消</el-button>
        <el-button @click="testDblink()" type="success">测试链接</el-button>
        <el-button type="primary" @click="submitTableForm()">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { 
  listdblinks,
  adddblink,
  updatedblink,
  deletedblink,
  testconnection
} from '@/apis/codegenerator';
import DetailTable from '@/components/DetailTable';
export default {
  name: 'Home',
  components: { DetailTable },
  data() {
    return {
      navList: [],
      activeItemID: '',
      popTitle: '',
      isShowPop: false,
      tableParam: {
        name: '',
        type: '',
        connection_string: ''
      },
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '不能为空', trigger: 'blur' }],
        connection_string: [{ required: true, message: '不能为空', trigger: 'blur' }],
      },
      // typeOptions: ['MySql', 'SqlServer', 'Sqlite', 'Oracle', 'PostgreSQL', 'Dm', 'Kdbndp', 'Oscar', 'MySqlConnector', 'Access', 'Custom']
      typeOptions: ['MySql']
    }
  },
  created() {
    this.getDblinksList();
  },
  methods: {
    // 获取数据库连接列表
    getDblinksList() {
      listdblinks().then(res => {
        let data = res.data || [];
        this.navList = data;
      })
    },
    // 选择数据库连接项
    chooseNavItem(data) {
      this.activeItemID = data.id;
    },
    // 打开新增数据库连接弹框
    isOpenAddPop() {
      this.popTitle = '新增数据库链接';
      this.isShowPop = true;
    },
    // 打开编辑数据库连接弹框
    isOpenEditPop(data) {
      this.popTitle = '编辑数据库链接';
      this.isShowPop = true;
      this.$nextTick(() => {
        this.tableParam = data;
      })
    },
    // 关闭数据库连接弹框时清空表单数据
    closePop() {
      this.$refs['tableForm'].resetFields();
    },
    // 测试链接
    testDblink() {
      this.$refs['tableForm'].validate((valid) => {
        if(!valid) return false;
        testconnection(this.tableParam).then(res => {
          this.$message({
            message: res.data?'链接成功':'链接失败',
            type: res.data?'success':'warning'
          });
        })
      })
    },
    // 提交表单
    submitTableForm() {
      this.$refs['tableForm'].validate((valid) => {
        if(!valid) return false;
        let func;
        this.popTitle==='新增数据库链接'?func=adddblink:func=updatedblink;
        func(this.tableParam).then(res => {
          let tip = res.succeeded?'成功':'失败'
          this.$message({
            message: this.popTitle + tip,
            type: res.succeeded?'success':'warning'
          });
          if(res.succeeded) {
            this.isShowPop = false;
            this.getDblinksList();
          }
        })
      })
    },
    // 删除数据库连接
    deleteItem(data) {
      deletedblink({id: data.id}).then(res => {
        this.$message({
          message: res.succeeded?'删除成功':'删除失败',
          type: res.succeeded?'success':'warning'
        });
        if(res.succeeded) this.getDblinksList();
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  height: 100%;
  width: 100%;
  .nav {
    width: 200px;
    max-width: 200px;
    height: 100%;
    border-right: 1px solid #ebebeb;
    >button {
      width: 180px;
      margin: 10px 10px 0 10px;
    }
    &-list {
      width: 100%;
      height: calc(100% - 70px);
      overflow-y: auto;
      &-items {
        width: calc(100% - 20px);
        height: 50px;
        line-height: 50px;
        cursor: pointer;
        position: relative;
        padding: 0 10px;
        &:not(:last-child)::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 10px;
          width: 180px;
          height: 1px;
          background-color: #ebebeb;
        }
        >span {
          display: inline-block;
          width: calc(100% - 30px);
          height: 50px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: bottom;
          &:hover {
            color: #409EFF;
          }
        }
        .active-item {
          color: #409EFF !important;
        }
        >i {
          margin-left: 10px;
          &:hover {
            color: #409EFF;
          }
        }
      }
    }
  }
  .show-box {
    width: calc(100% - 200px);
    height: 100%;
  }
}
</style>
